<template>
  <view class="container">
    <uni-nav-bar left-icon="back" title="充值" />
    <view class="recharge-amount">
      <view class="item">
        <text>充值金额：</text>
        <input v-model="amount" type="number" placeholder="请输入充值金额" />
        <text>元</text>
      </view>
    </view>
    <view class="payment-method">
      <text>支付方式：</text>
      <radio-group @change="paymentChange">
        <label>
          <radio value="wechat" />微信支付
        </label>
        <label>
          <radio value="alipay" />支付宝支付
        </label>
      </radio-group>
    </view>
    <button class="submit-btn" @click="submitRecharge">确认充值</button>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      amount: '',
      paymentMethod: 'wechat'
    };
  },
  methods: {
    paymentChange(e) {
      this.paymentMethod = e.detail.value;
    },
    submitRecharge() {
      if (!this.amount || this.amount <= 0) {
        uni.showToast({ title: '请输入有效金额', icon: 'none' });
        return;
      }
      // 调用API进行充值
      api.wallet.recharge({
        amount: this.amount,
        method: this.paymentMethod
      }).then(res => {
        uni.showToast({ title: '充值成功', icon: 'success' });
        this.amount = '';
      }).catch(err => {
        uni.showToast({ title: '充值失败', icon: 'none' });
      });
    }
  }
};
</script>

<style>
  .recharge-amount .item { display: flex; align-items: center; padding: 10px; }
  .payment-method { padding: 10px; }
  .submit-btn { margin: 20px; }
</style>